<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';

import { ChevronLeft, ChevronRight, Search, X } from '@vben/icons';

import { message } from 'ant-design-vue';

import AccountEntryModal from './components/AccountEntryModal.vue';
import AddNotesModal from './components/AddNotesModal.vue';
import BatchModifyModal from './components/BatchModifyModal.vue';
import ChangeRoomModal from './components/ChangeRoomModal.vue';
import CheckInModal from './components/CheckInModal.vue';
import CheckOutModal from './components/CheckOutModal.vue';
import ModifyStatusModal from './components/ModifyStatusModal.vue';
// 导入模态框组件
import OpenRoomModal from './components/OpenRoomModal.vue';
import ReplenishCardModal from './components/ReplenishCardModal.vue';

// 房间接口定义
interface Room {
  id: string;
  number: string;
  type: string;
  status: string;
  capacity: number;
  occupied: number;
  openTime?: string;
  handCard?: string;
  notes?: string;
  icon?: string;
}

// 响应式数据
const activeRoomType = ref('all');
const activeStatusFilter = ref('all');
const selectedRoom = ref<null | Room>(null);
const searchRoomNumber = ref('');
const quickOpenRoom = ref(false);
const rightPanelCollapsed = ref(false);

// 右键菜单
const contextMenu = ref({
  visible: false,
  x: 0,
  y: 0,
  room: null as null | Room,
});

// 模态框状态
const modals = ref({
  openRoom: false,
  modifyStatus: false,
  checkOut: false,
  changeRoom: false,
  accountEntry: false,
  addNotes: false,
  replenishCard: false,
  batchModify: false,
  checkIn: false,
});

// 房间类型标签
const roomTypeTabs = ref([
  { key: 'all', label: '全部' },
  { key: 'lounge', label: '休息室' },
  { key: 'chess', label: '棋牌室' },
  { key: 'vip', label: 'VIP休息室' },
  { key: 'guest', label: '客房' },
]);

// 房间状态定义
const roomStatuses = ref([
  { key: 'vacant', label: '空闲', color: '#f5f5f5' },
  { key: 'occupied', label: '占用', color: '#52c41a' },
  { key: 'disabled', label: '禁用', color: '#722ed1' },
  { key: 'dirty', label: '脏房', color: '#8b4513' },
  { key: 'willDepart', label: '将离', color: '#faad14' },
  { key: 'hourly', label: '钟点房', color: '#1890ff' },
  { key: 'earlyMorning', label: '凌晨房', color: '#13c2c2' },
]);

// 模拟房间数据
const rooms = ref<Room[]>([
  // 休息室
  {
    id: '1',
    number: '1001',
    type: '休息室',
    status: 'vacant',
    capacity: 5,
    occupied: 0,
  },
  {
    id: '2',
    number: '1002',
    type: '休息室',
    status: 'occupied',
    capacity: 5,
    occupied: 2,
    openTime: '12/24 22:12',
    handCard: '2003男宾',
  },
  {
    id: '3',
    number: '1003',
    type: '休息室',
    status: 'occupied',
    capacity: 5,
    occupied: 1,
    openTime: '12/24 22:12',
    handCard: '2004男宾',
  },
  {
    id: '4',
    number: '1004',
    type: '休息室',
    status: 'occupied',
    capacity: 5,
    occupied: 3,
    openTime: '12/24 22:12',
    handCard: '2005男宾',
  },
  {
    id: '5',
    number: '1005',
    type: '休息室',
    status: 'occupied',
    capacity: 5,
    occupied: 4,
    openTime: '12/24 22:12',
    handCard: '2006男宾',
  },
  {
    id: '6',
    number: '1006',
    type: '休息室',
    status: 'occupied',
    capacity: 5,
    occupied: 5,
    openTime: '12/24 22:12',
    handCard: '2007男宾',
  },
  {
    id: '7',
    number: '1007',
    type: '休息室',
    status: 'willDepart',
    capacity: 2,
    occupied: 2,
    openTime: '12/24 22:12',
    handCard: '2008男宾',
  },
  {
    id: '8',
    number: '1008',
    type: '休息室',
    status: 'willDepart',
    capacity: 2,
    occupied: 1,
    openTime: '12/24 22:12',
    handCard: '2009男宾',
  },
  {
    id: '9',
    number: '1009',
    type: '休息室',
    status: 'disabled',
    capacity: 5,
    occupied: 0,
  },
  {
    id: '10',
    number: '1010',
    type: '休息室',
    status: 'dirty',
    capacity: 5,
    occupied: 0,
  },

  // 棋牌室
  {
    id: '11',
    number: '2001',
    type: '棋牌室',
    status: 'vacant',
    capacity: 4,
    occupied: 0,
  },
  {
    id: '12',
    number: '2002',
    type: '棋牌室',
    status: 'occupied',
    capacity: 4,
    occupied: 3,
    openTime: '12/24 22:12',
    handCard: '3001男宾',
  },
  {
    id: '13',
    number: '2003',
    type: '棋牌室',
    status: 'occupied',
    capacity: 4,
    occupied: 4,
    openTime: '12/24 22:12',
    handCard: '3002男宾',
  },
  {
    id: '14',
    number: '2004',
    type: '棋牌室',
    status: 'willDepart',
    capacity: 4,
    occupied: 2,
    openTime: '12/24 22:12',
    handCard: '3003男宾',
  },
  {
    id: '15',
    number: '2005',
    type: '棋牌室',
    status: 'disabled',
    capacity: 4,
    occupied: 0,
  },

  // VIP休息室
  {
    id: '16',
    number: '3001',
    type: 'VIP休息室',
    status: 'vacant',
    capacity: 6,
    occupied: 0,
  },
  {
    id: '17',
    number: '3002',
    type: 'VIP休息室',
    status: 'occupied',
    capacity: 6,
    occupied: 4,
    openTime: '12/24 22:12',
    handCard: '4001男宾',
  },
  {
    id: '18',
    number: '3003',
    type: 'VIP休息室',
    status: 'hourly',
    capacity: 6,
    occupied: 2,
    openTime: '12/24 22:12',
    handCard: '4002男宾',
    icon: '🕐',
  },
  {
    id: '19',
    number: '3004',
    type: 'VIP休息室',
    status: 'earlyMorning',
    capacity: 6,
    occupied: 1,
    openTime: '12/24 22:12',
    handCard: '4003男宾',
    icon: '🌙',
  },
]);

// 计算属性
const filteredRooms = computed(() => {
  let filtered = rooms.value;

  // 房型筛选
  if (activeRoomType.value !== 'all') {
    filtered = filtered.filter((room) => {
      const typeMap: Record<string, string> = {
        lounge: '休息室',
        chess: '棋牌室',
        vip: 'VIP休息室',
        guest: '客房',
      };
      return room.type === typeMap[activeRoomType.value];
    });
  }

  // 状态筛选
  if (activeStatusFilter.value !== 'all') {
    filtered = filtered.filter(
      (room) => room.status === activeStatusFilter.value,
    );
  }

  // 房间号搜索
  if (searchRoomNumber.value) {
    filtered = filtered.filter((room) =>
      room.number.includes(searchRoomNumber.value),
    );
  }

  return filtered;
});

// 房态统计
const roomTypeStats = computed(() => {
  const stats = [
    {
      name: '休息室',
      vacant: 0,
      occupied: 0,
      disabled: 0,
      dirty: 0,
      willDepart: 0,
    },
    {
      name: '棋牌室',
      vacant: 0,
      occupied: 0,
      disabled: 0,
      dirty: 0,
      willDepart: 0,
    },
    {
      name: 'VIP休息室',
      vacant: 0,
      occupied: 0,
      disabled: 0,
      dirty: 0,
      willDepart: 0,
    },
  ];

  rooms.value.forEach((room) => {
    const statIndex = stats.findIndex((s) => s.name === room.type);
    if (statIndex !== -1) {
      switch (room.status) {
        case 'dirty': {
          stats[statIndex].dirty++;
          break;
        }
        case 'disabled': {
          stats[statIndex].disabled++;
          break;
        }
        case 'earlyMorning':
        case 'hourly':
        case 'occupied': {
          stats[statIndex].occupied++;
          break;
        }
        case 'vacant': {
          stats[statIndex].vacant++;
          break;
        }
        case 'willDepart': {
          stats[statIndex].willDepart++;
          break;
        }
      }
    }
  });

  return stats;
});

// 方法
const toggleRightPanel = () => {
  rightPanelCollapsed.value = !rightPanelCollapsed.value;
};

const searchRoom = () => {
  if (searchRoomNumber.value) {
    message.success(`搜索房间号: ${searchRoomNumber.value}`);
  }
};

const selectRoom = (room: Room) => {
  selectedRoom.value = room;
};

const showContextMenu = (event: MouseEvent, room: Room) => {
  event.preventDefault();
  contextMenu.value = {
    visible: true,
    x: event.clientX,
    y: event.clientY,
    room,
  };
};

const hideContextMenu = () => {
  contextMenu.value.visible = false;
};

const getStatusLabel = (status: string) => {
  const statusItem = roomStatuses.value.find((s) => s.key === status);
  return statusItem ? statusItem.label : status;
};

const getStatusCount = (status: string) => {
  return rooms.value.filter((room) => room.status === status).length;
};

const filterByStatus = (status: string) => {
  activeStatusFilter.value =
    activeStatusFilter.value === status ? 'all' : status;
};

// 功能操作方法
const openRoom = () => {
  if (selectedRoom.value) {
    modals.value.openRoom = true;
  } else {
    message.warning('请先选择一个房间');
  }
};

const modifyRoomStatus = () => {
  if (selectedRoom.value) {
    modals.value.modifyStatus = true;
  } else {
    message.warning('请先选择一个房间');
  }
};

const checkOut = () => {
  if (selectedRoom.value) {
    modals.value.checkOut = true;
  } else {
    message.warning('请先选择一个房间');
  }
};

const changeRoom = () => {
  if (selectedRoom.value) {
    modals.value.changeRoom = true;
  } else {
    message.warning('请先选择一个房间');
  }
};

const accountEntry = () => {
  if (selectedRoom.value) {
    modals.value.accountEntry = true;
  } else {
    message.warning('请先选择一个房间');
  }
};

const addNotes = () => {
  if (selectedRoom.value) {
    modals.value.addNotes = true;
  } else {
    message.warning('请先选择一个房间');
  }
};

const replenishCard = () => {
  if (selectedRoom.value) {
    modals.value.replenishCard = true;
  } else {
    message.warning('请先选择一个房间');
  }
};

const batchModifyStatus = () => {
  modals.value.batchModify = true;
};

const checkInGuestRoom = () => {
  modals.value.checkIn = true;
};

// 右键菜单操作方法
const handleContextMenuAction = (action: string) => {
  // 设置选中的房间为右键菜单中的房间
  if (contextMenu.value.room) {
    selectedRoom.value = contextMenu.value.room;
  }

  // 隐藏右键菜单
  contextMenu.value.visible = false;

  // 根据操作类型执行相应的方法
  switch (action) {
    case 'accountEntry': {
      accountEntry();
      break;
    }
    case 'addNotes': {
      addNotes();
      break;
    }
    case 'changeRoom': {
      changeRoom();
      break;
    }
    case 'checkOut': {
      checkOut();
      break;
    }
    case 'modifyRoomStatus': {
      modifyRoomStatus();
      break;
    }
    case 'openRoom': {
      openRoom();
      break;
    }
    case 'replenishCard': {
      replenishCard();
      break;
    }
    default: {
      break;
    }
  }
};

// 计算右键菜单位置
const contextMenuStyle = computed(() => ({
  left: `${contextMenu.value.x}px`,
  top: `${contextMenu.value.y}px`,
}));

// 生命周期
onMounted(() => {
  document.addEventListener('click', hideContextMenu);
});

onUnmounted(() => {
  document.removeEventListener('click', hideContextMenu);
});
</script>

<template>
  <div class="spa-room-status-center">
    <!-- 主内容区域 -->
    <div
      class="main-content"
      :class="{ 'panel-collapsed': rightPanelCollapsed }"
    >
      <!-- 左侧房间网格 -->
      <div class="room-grid-container">
        <!-- 筛选和搜索区域 -->
        <div class="filter-section">
          <div class="filter-tabs">
            <a-button
              v-for="tab in roomTypeTabs"
              :key="tab.key"
              :type="activeRoomType === tab.key ? 'primary' : 'default'"
              @click="activeRoomType = tab.key"
            >
              {{ tab.label }}
            </a-button>
          </div>

          <div class="search-section">
            <a-input
              v-model:value="searchRoomNumber"
              placeholder="请输入房间号"
              style="width: 200px; margin-right: 8px"
              @keyup.enter="searchRoom"
            />
            <a-button type="primary" @click="searchRoom">
              <Search />
            </a-button>
            <a-checkbox
              v-model:checked="quickOpenRoom"
              style="margin-left: 16px"
            >
              点击"Enter"快速开房
            </a-checkbox>
          </div>
        </div>

        <!-- 房间网格 -->
        <div class="room-grid">
          <div
            v-for="room in filteredRooms"
            :key="room.id"
            class="room-card"
            :class="[
              `status-${room.status}`,
              { selected: selectedRoom?.id === room.id },
            ]"
            @click="selectRoom(room)"
            @contextmenu="showContextMenu($event, room)"
          >
            <div class="room-number">{{ room.number }}</div>
            <div class="room-type">{{ room.type }}</div>
            <div class="room-capacity">
              {{ room.occupied }}/{{ room.capacity }}
            </div>
            <div v-if="room.handCard" class="room-handcard">
              {{ room.handCard }}
            </div>
            <div v-if="room.icon" class="room-icon">{{ room.icon }}</div>
          </div>
        </div>
      </div>

      <!-- 右侧功能面板 -->
      <div class="right-panel" :class="{ collapsed: rightPanelCollapsed }">
        <!-- 折叠按钮 -->
        <div class="collapse-button" @click="toggleRightPanel">
          <ChevronRight v-if="!rightPanelCollapsed" />
          <ChevronLeft v-else />
        </div>

        <!-- 房间状态筛选区 -->
        <div class="status-filter-section-right">
          <h3>房间状态筛选</h3>
          <div class="status-filter-items">
            <div
              v-for="status in roomStatuses"
              :key="status.key"
              class="status-filter-item"
              :class="{ active: activeStatusFilter === status.key }"
              @click="filterByStatus(status.key)"
            >
              <div class="status-color" :class="`status-${status.key}`"></div>
              <span class="status-label">{{ status.label }}</span>
              <span class="status-count"
                >({{ getStatusCount(status.key) }})</span
              >
            </div>
          </div>
        </div>

        <!-- 功能按钮区域 -->
        <div class="function-buttons">
          <h3>功能操作</h3>
          <div class="button-grid">
            <a-button type="primary" @click="batchModifyStatus">
              批量修改房态
            </a-button>
            <a-button type="primary" @click="checkInGuestRoom">
              入住(客房)
            </a-button>
            <a-button type="primary" @click="openRoom"> 开房 </a-button>
            <a-button type="primary" @click="checkOut"> 退房 </a-button>
            <a-button type="primary" @click="changeRoom"> 换房 </a-button>
            <a-button type="primary" @click="accountEntry"> 入账 </a-button>
            <a-button type="primary" @click="addNotes"> 添加备注 </a-button>
            <a-button type="primary" @click="replenishCard"> 补卡 </a-button>
          </div>
        </div>

        <!-- 房态统计信息区域 -->
        <div class="statistics-section">
          <h3>房态统计</h3>
          <div class="statistics-table">
            <table>
              <thead>
                <tr>
                  <th>房型</th>
                  <th>空闲</th>
                  <th>占用</th>
                  <th>禁用</th>
                  <th>脏房</th>
                  <th>将离</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="type in roomTypeStats" :key="type.name">
                  <td>{{ type.name }}</td>
                  <td>{{ type.vacant }}</td>
                  <td>{{ type.occupied }}</td>
                  <td>{{ type.disabled }}</td>
                  <td>{{ type.dirty }}</td>
                  <td>{{ type.willDepart }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- 选中房间详情面板 -->
    <div v-if="selectedRoom" class="room-detail-panel">
      <div class="detail-header">
        <h3>房间详情</h3>
        <a-button type="text" @click="selectedRoom = null">
          <X />
        </a-button>
      </div>
      <div class="detail-content">
        <div class="detail-item">
          <label>房间号:</label>
          <span>{{ selectedRoom.number }}</span>
        </div>
        <div class="detail-item">
          <label>房型:</label>
          <span>{{ selectedRoom.type }}</span>
        </div>
        <div class="detail-item">
          <label>房间状态:</label>
          <span>{{ getStatusLabel(selectedRoom.status) }}</span>
        </div>
        <div class="detail-item">
          <label>人数:</label>
          <span>{{ selectedRoom.occupied }}人</span>
        </div>
        <div class="detail-item">
          <label>开房时间:</label>
          <span>{{ selectedRoom.openTime || '(empty)' }}</span>
        </div>
        <div class="detail-item">
          <label>开房手牌:</label>
          <span>{{ selectedRoom.handCard || '(empty)' }}</span>
        </div>
        <div class="detail-item">
          <label>房间备注:</label>
          <span>{{ selectedRoom.notes || '(empty)' }}</span>
        </div>
      </div>
    </div>

    <!-- 右键菜单 -->
    <div
      v-if="contextMenu.visible"
      class="context-menu"
      :style="contextMenuStyle"
    >
      <div class="menu-item" @click="handleContextMenuAction('openRoom')">
        开房
      </div>
      <div
        class="menu-item"
        @click="handleContextMenuAction('modifyRoomStatus')"
      >
        修改房态
      </div>
      <div class="menu-item" @click="handleContextMenuAction('checkOut')">
        退房
      </div>
      <div class="menu-item" @click="handleContextMenuAction('changeRoom')">
        换房
      </div>
      <div class="menu-item" @click="handleContextMenuAction('accountEntry')">
        入账
      </div>
      <div class="menu-item" @click="handleContextMenuAction('addNotes')">
        添加备注
      </div>
      <div class="menu-item" @click="handleContextMenuAction('replenishCard')">
        补卡
      </div>
    </div>

    <!-- 各种模态框 -->
    <OpenRoomModal v-model:visible="modals.openRoom" :room="selectedRoom" />
    <ModifyStatusModal
      v-model:visible="modals.modifyStatus"
      :room="selectedRoom"
    />
    <CheckOutModal v-model:visible="modals.checkOut" :room="selectedRoom" />
    <ChangeRoomModal v-model:visible="modals.changeRoom" :room="selectedRoom" />
    <AccountEntryModal
      v-model:visible="modals.accountEntry"
      :room="selectedRoom"
    />
    <AddNotesModal v-model:visible="modals.addNotes" :room="selectedRoom" />
    <ReplenishCardModal
      v-model:visible="modals.replenishCard"
      :room="selectedRoom"
    />
    <BatchModifyModal v-model:visible="modals.batchModify" />
    <CheckInModal v-model:visible="modals.checkIn" />
  </div>
</template>

<style scoped>
/* 响应式设计 - 小屏幕适配 */
@media (max-height: 600px) {
  .right-panel {
    gap: 12px;
    padding-top: 60px;
  }

  .right-panel .function-buttons,
  .right-panel .statistics-section,
  .right-panel .status-filter-section-right {
    padding: 12px;
  }

  .right-panel .function-buttons h3,
  .right-panel .statistics-section h3,
  .right-panel .status-filter-section-right h3 {
    margin: 0 0 10px;
    font-size: 14px;
  }

  .right-panel .button-grid {
    gap: 6px;
  }

  .right-panel .button-grid .ant-btn {
    padding: 4px 8px;
    font-size: 12px;
  }

  .right-panel .statistics-table table {
    font-size: 12px;
  }

  .right-panel .statistics-table th,
  .right-panel .statistics-table td {
    padding: 4px 6px;
  }
}

@media (max-width: 1200px) {
  .right-panel {
    width: 280px;
  }

  .main-content {
    padding-right: 300px;
  }

  .main-content.panel-collapsed {
    padding-right: 100px;
  }
}

.spa-room-status-center {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background-color: #f5f5f5;
}

.main-content {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 16px;
  padding-right: 320px;
  overflow: hidden;
  transition: padding-right 0.3s ease;
}

.main-content.panel-collapsed {
  padding-right: 100px;
}

.room-grid-container {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: white;
  border-radius: 8px;
}

.filter-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.filter-tabs {
  display: flex;
  gap: 8px;
}

.search-section {
  display: flex;
  align-items: center;
}

.room-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  max-width: 100%;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
}

.room-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 8px;
  color: #333;
  cursor: pointer;
  background: #fafafa;
  border: 2px solid #d9d9d9;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.room-card:hover {
  border-color: #40a9ff;
  box-shadow: 0 6px 20px rgb(0 0 0 / 15%);
  transform: translateY(-3px);
}

.room-card.selected {
  background: #e6f7ff;
  border-color: #1890ff;
  box-shadow: 0 0 0 3px rgb(24 144 255 / 25%);
}

.room-number {
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.room-type {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 400;
  color: #595959;
}

.room-capacity {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #8c8c8c;
}

.room-handcard {
  padding: 2px 6px;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 500;
  color: #1890ff;
  background: rgb(24 144 255 / 10%);
  border-radius: 4px;
}

.room-icon {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 12px;
}

/* 房间状态样式 */
.room-card.status-vacant {
  background: #fafafa;
  border-color: #d9d9d9;
}

.room-card.status-occupied {
  background: #f6ffed;
  border-color: #52c41a;
}

.room-card.status-disabled {
  background: #f9f0ff;
  border-color: #722ed1;
}

.room-card.status-dirty {
  background: #fff7e6;
  border-color: #8b4513;
}

.room-card.status-willDepart {
  background: #fffbe6;
  border-color: #faad14;
}

.room-card.status-hourly {
  background: #e6f7ff;
  border-color: #1890ff;
}

.room-card.status-earlyMorning {
  background: #e6fffb;
  border-color: #13c2c2;
}

/* 右侧面板样式 */
.right-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 300px;
  max-height: 100vh;
  padding: 16px;
  padding-top: 80px;
  overflow-y: auto;
  background: white;
  border-left: 1px solid #d9d9d9;
  box-shadow: -2px 0 8px rgb(0 0 0 / 10%);
  transition: all 0.3s ease;
}

.right-panel.collapsed {
  width: 80px;
  padding: 12px 6px;
}

.right-panel.collapsed .function-buttons,
.right-panel.collapsed .statistics-section {
  display: none;
}

.right-panel.collapsed .status-filter-section-right {
  padding: 6px;
  margin-top: 150px;
  margin-bottom: 6px;
}

.right-panel.collapsed .status-filter-section-right h3 {
  margin: 0 0 6px;
  font-size: 10px;
  text-align: center;
}

.right-panel.collapsed .status-filter-items {
  gap: 2px;
}

.right-panel.collapsed .status-filter-item {
  flex-direction: column;
  align-items: center;
  width: 80px;
  padding: 1px 2px;
  font-size: 8px;
  text-align: center;
}

.right-panel.collapsed .status-color {
  width: 10px;
  height: 10px;
  margin-bottom: 1px;
}

.right-panel.collapsed .status-label {
  font-size: 8px;
  line-height: 1;
}

.right-panel.collapsed .status-count {
  font-size: 7px;
  line-height: 1;
}

.collapse-button {
  position: absolute;
  top: 50%;
  left: -5px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 60px;
  color: white;
  cursor: pointer;
  background: #1890ff;
  border-radius: 4px 0 0 4px;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.collapse-button:hover {
  background: #40a9ff;
}

/* 右侧状态筛选区样式 */
.status-filter-section-right {
  padding: 16px;
  margin-bottom: 16px;
  background: white;
  border-radius: 8px;
}

.status-filter-section-right h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #333;
}

.status-filter-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.status-filter-item {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.2s;
}

.status-filter-item:hover {
  background-color: #f5f5f5;
  border-color: #d9d9d9;
}

.status-filter-item.active {
  color: #1890ff;
  background-color: #e6f7ff;
  border-color: #1890ff;
}

.status-color {
  width: 16px;
  height: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
}

.status-label {
  color: #333;
}

.status-count {
  font-size: 11px;
  color: #666;
}

.function-buttons,
.statistics-section {
  padding: 16px;
  background: white;
  border-radius: 8px;
}

.function-buttons h3,
.statistics-section h3 {
  margin: 0 0 16px;
  font-size: 16px;
  color: #333;
}

.button-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.button-grid .ant-btn {
  justify-content: flex-start;
  text-align: left;
}

.statistics-table {
  overflow-x: auto;
}

.statistics-table table {
  width: 100%;
  font-size: 14px;
  border-collapse: collapse;
}

.statistics-table th,
.statistics-table td {
  padding: 8px;
  text-align: center;
  border: 1px solid #f0f0f0;
}

.statistics-table th {
  font-weight: bold;
  color: #333;
  background-color: #fafafa;
}

.statistics-table td {
  color: #666;
}

/* 房间状态颜色 */
.status-vacant {
  color: #333;
  background-color: #f5f5f5 !important;
}

.status-occupied {
  color: white;
  background-color: #52c41a !important;
}

.status-disabled {
  color: white;
  background-color: #722ed1 !important;
}

.status-dirty {
  color: white;
  background-color: #8b4513 !important;
}

.status-willDepart {
  color: white;
  background-color: #faad14 !important;
}

.status-hourly {
  color: white;
  background-color: #1890ff !important;
}

.status-earlyMorning {
  color: white;
  background-color: #13c2c2 !important;
}

/* 房间详情面板 */
.room-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100vh;
  background: white;
  border-left: 1px solid #d9d9d9;
  box-shadow: -2px 0 8px rgb(0 0 0 / 10%);
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.detail-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.detail-item label {
  min-width: 80px;
  font-weight: bold;
  color: #666;
}

/* 右键菜单 */
.context-menu {
  position: fixed;
  z-index: 1001;
  min-width: 120px;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
}

.menu-item {
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: #f5f5f5;
}
</style>
